<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>搜索框</span></div>
    <div class="bds">
      <el-collapse v-model="activeName">
        <el-collapse-item title="组件样式" name="c1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="提示文字"><el-input style="width:300px;" v-model="data.placeholder" placeholder=""></el-input></el-form-item>

            <el-form-item label="文字颜色">
              <!-- <div class="color_div">
                <el-color-picker size="medium" v-model="data.color.text"></el-color-picker>
                <div class="input-with-reset">
                  <el-input size="medium" class="" v-model="data.color.text">
                    <template slot="prepend">#</template>
                    <el-button size="medium" @click="Reset_Color('text','#FFFFFF')" slot="append">重置</el-button>
                  </el-input>
                </div>
              </div> -->
              <ColorPicker :color="data.color" :name="'text'"></ColorPicker>
            </el-form-item>

            <el-form-item label="图标颜色">
              <ColorPicker :color="data.color" :name="'icon'"></ColorPicker>
              <!-- <div class="color_div">
                <el-color-picker size="medium" v-model="data.color.icon"></el-color-picker>
                <div class="input-with-reset">
                  <el-input size="medium" class="" v-model="data.color.icon">
                    <template slot="prepend">#</template>
                    <el-button size="medium" @click="Reset_Color('icon','#FFFFFF')" slot="append">重置</el-button>
                  </el-input>
                </div>
              </div> -->
            </el-form-item>

            <el-form-item label="边框颜色">
              <ColorPicker :color="data.color" :name="'border'"></ColorPicker>
              <!--  <div class="color_div">
                <el-color-picker size="medium" v-model="data.color.border"></el-color-picker>
                <div class="input-with-reset">
                  <el-input size="medium" class="" v-model="data.color.border">
                    <template slot="prepend">#</template>
                    <el-button size="medium" @click="Reset_Color('bg','#FFFFFF')" slot="append">重置</el-button>
                  </el-input>
                </div>
              </div> -->
            </el-form-item>
            <el-form-item label="组件背景">
              <el-radio-group v-model="data.bg_type">
                <el-radio :label="1">背景颜色</el-radio>
                <el-radio :label="2">背景图片</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景颜色" v-if="data.bg_type == 1"><ColorPicker :color="data" :name="'bg_color'"></ColorPicker></el-form-item>
            <el-form-item label="背景图片" v-if="data.bg_type == 2">
              <div class="img_box"><Upload :tempUrl="data.bg_img" @input="getbgimg"></Upload></div>
              <div class="tips">建议尺寸750x{{data.margin.bottom+data.margin.top+72}}</div>
            </el-form-item>
            <el-form-item label="输入框背景">
              <ColorPicker :color="data.color" :name="'bg'"></ColorPicker>
              <!-- <div class="color_div">
                <el-color-picker size="medium" v-model="data.color.bg"></el-color-picker>
                <div class="input-with-reset">
                  <el-input size="medium" class="" v-model="data.color.bg">
                    <template slot="prepend">#</template>
                    <el-button size="medium" @click="Reset_Color('bg','#FFFFFF')" slot="append">重置</el-button>
                  </el-input>
                </div>
              </div> -->
            </el-form-item>

            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.margin.top"></el-slider>
                <el-input-number v-model="data.margin.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.margin.bottom"></el-slider>
                <el-input-number v-model="data.margin.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.padding.lr"></el-slider>
                <el-input-number v-model="data.padding.lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="圆角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.radius"></el-slider>
                <el-input-number v-model="data.radius" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <!-- <el-form-item label="商品类型">
              <el-checkbox></el-checkbox>
            </el-form-item>
            <el-form-item label="显示类型">
              <el-radio-group size="small" v-model="data.show_type">
                <el-radio label="block">普通</el-radio>
                <el-radio :disabled="data.list_type == 'list'" label="scroll">左右滑动</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="列表类型">
              <el-radio-group size="small" v-model="data.list_type">
                <el-radio label="two">双列</el-radio>
                <el-radio label="three">三列</el-radio>
                <el-radio :disabled="data.show_type == 'scroll'" label="list">列表</el-radio>
                <el-radio label="one">单列</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景颜色">
              <div class="color_div">
                <el-color-picker size="small" v-model="data.bg"></el-color-picker>
                <div class="input-with-reset">
                  <el-input size="small" class="" v-model="data.bg">
                    <template slot="prepend">#</template>
                    <el-button size="small" @click="Reset_Color('bg','#FFFFFF')" slot="append">重置</el-button>
                  </el-input>
                </div>
              </div>
            </el-form-item> -->
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import ColorPicker from '@/components/ColorPicker/index';

import Upload from '@/components/Upload/SingleImage2';
export default {
  data() {
    return {
      activeName: 'c1'
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  created() {
  },
  components: {
    ColorPicker,
    Upload
  },
  methods: {
    getbgimg(data) {
      this.data.bg_img = data;
    },
    //重置颜色
    Reset_Color(a, b) {
      this.data.color[a] = b;
    }
  }
};
</script>

<style lang="scss" scoped>
  .img_box {
    width: 60px;
    height: 60px;
  }
// .color_div {
//   display: flex;
//   align-items: center;

//   .input-with-reset {
//     width: 240px;
//     margin-left: 10px;
//   }
// }

// .slider_box {
//   display: flex;

//   .slider_item {
//     width: 275px;
//     margin-right: 20px;
//   }

//   .slider_input {
//     width: 110px;
//   }
// }
</style>
